<template>
  <div class="PageQuery">
    <div class="content" v-show="showFlag">
      <div class="title">行政处罚决定书</div>
      <div class="space">
        <span>当事人:</span><span v-html="result.party"></span>
      </div>
      <div class="space">
        <span>案件编号:</span><span v-html="result.caseCode"></span>
      </div>
      <div class="space">
        <span>违法行为:</span><span v-html="result.factsAndEvidence"></span>
      </div>
      <div class="space">
        <span>处罚金额:</span><span v-html="result.penaltyAmount"></span>
      </div>
      <div class="space">
        <span>违章时间:</span><span v-html="result.time"></span>
      </div>
      <div class="btncont">
        <button class="btn  btn-success" @click="payment">立马缴费</button>
      </div>
    </div>
    <loading v-show="!showFlag"></loading>
  </div>
</template>
<script type="text/ecmascript-6">
  import http from '../util/https'
  import {baseurl} from '../base/config'
  import {mapGetters} from "vuex"
  import confirm from './confirm/confirm'
  import loading from './loading'

  export default {
    name: "PageQuery",
    data() {
      return {
        result: {},
        showFlag: false,
      }
    },
    components: {
      confirm,
      loading
    },
    mounted() {
      this.fetchData()
    },
    computed: {
      ...mapGetters([
        'setuser'
      ]),
    },
    created() {
      //console.log(this.setuser)
    },
    methods: {
      payment() {
        this.$router.push({
          name: "payment"
        })
      },
      //渲染行政处罚决定书数据
      fetchData: async function () {
        const url = baseurl + "/caseQuery/getPenaltyNotices";
        let params = {
          code: this.setuser.illegalCaseCode ? this.setuser.illegalCaseCode : this.setuser.illegalCase.code
        };
        //  console.log(params)
        const res = await http.get(url, params);
      //  console.log(res);
        if (res.data.code === 0) {
          this.showFlag = true;
          setTimeout(() => {
            this.result = res.data.data;
          }, 30);
        }
      },
    }
  }
</script>
<style scoped lang="less" type="text/less">
  .PageQuery {
    position: relative;
    .title {
      text-align: center;
      font-size: .4rem;
      margin-top: .5rem;
      color: #449d44;
    }
    .content {
      margin-top: 1rem;
      font-size: .3rem;
      padding: 0 .5rem;
      line-height: .8rem;
      margin-bottom: 1rem;
      .space {
        line-height: .7rem;
      }
    }
    .noresult {
      text-align: center;
      font-size: .35rem;
      height: 10rem;
      line-height: 10rem;
    }

    .btncont {
      text-align: center;
      margin: .5rem 0;
      .btn-success {
        width: 2rem;
        height: .8rem;
        background: #449d44;
        color: #fff;
        outline: none;
        border: none;
        border-radius: .15rem;
        font-size: .3rem;
      }
    }

  }

</style>
